<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="community-page bg-gray-50 min-h-screen pb-16">
    <view class="bg-white mt-2 p-4">
      <view class="flex justify-between items-center mb-4">
        <view class="text-lg font-bold text-gray-800">小区</view>
        <view class="text-sm text-orange-500 flex items-center">
          查看全部
          <ChevronRight class="w-4 h-4" />
        </view>
      </view>

      <!-- Community Tabs -->
      <view class="flex border-b mb-4">
        <navigator
          v-for="(tab, index) in communityTabs"
          :key="index"
          class="pb-2 px-4 text-sm font-medium relative"
          :class="activeCommunityTab === index ? 'text-orange-500' : 'text-gray-500'"
          @click="activeCommunityTab = index"
          :url="tab.url"
        >
          {{ tab }}
          <view
            v-if="activeCommunityTab === index"
            class="absolute bottom-0 left-0 right-0 h-0.5 bg-orange-500"
          ></view>
        </navigator>
      </view>

      <!-- Community List -->
      <view class="space-y-4">
        <view
          v-for="(community, index) in communities"
          :key="index"
          class="flex bg-gray-50 rounded-lg p-3 relative"
        >
          <image
            :src="community.communityImage"
            :alt="community.communityName"
            class="w-20 h-20 rounded-lg object-cover mr-3"
          />
          <view class="flex-1">
            <view class="font-medium text-gray-800">{{ community.communityName }}</view>
            <view class="flex items-center text-xs text-gray-500 mt-1">
              <Users class="w-3 h-3 mr-1" />
              <text>{{ community.collectNumber }}成员</text>
              <text class="mx-2">|</text>
              <MessageSquare class="w-3 h-3 mr-1" />
              <text>{{ community.topics }}话题</text>
            </view>
            <view class="flex items-center text-xs text-gray-500 mt-1">
              <MapPin class="w-3 h-3 mr-1" />
              <text>{{ community.address }}</text>
            </view>
          </view>
          <view
            class="absolute right-3 top-3 bg-orange-500 text-white text-xs px-2 py-1 rounded"
            @click="openQRCodeModal(community)"
          >
            加入群
          </view>
        </view>
      </view>
    </view>

    <!-- 3. Shangrao News Section -->
    <view class="bg-white mt-2 p-4">
      <view class="flex justify-between items-center mb-4">
        <view class="text-lg font-bold text-gray-800">上饶资讯</view>
        <view class="text-sm text-orange-500 flex items-center">
          更多资讯
          <ChevronRight class="w-4 h-4" />
        </view>
      </view>

      <view class="space-y-4">
        <NewsList :list="newsList" />
      </view>
    </view>

    <!-- 4. Community Topics Section -->
    <view class="bg-white mt-2 p-4">
      <view class="flex justify-between items-center mb-4">
        <view class="text-lg font-bold text-gray-800">社区话题</view>
        <view class="text-sm text-orange-500 flex items-center">
          发布话题
          <PlusCircle class="w-4 h-4 ml-1" />
        </view>
      </view>

      <!-- Topic Categories -->
      <view class="topic-categories overflow-x-auto mb-4">
        <view class="flex whitespace-nowrap">
          <view
            v-for="(category, index) in topicCategories"
            :key="index"
            class="px-3 py-1 mr-2 rounded-full text-xs font-medium"
            :class="
              activeTopicCategory === index
                ? 'bg-orange-500 text-white'
                : 'bg-gray-100 text-gray-700'
            "
            @click="activeTopicCategory = index"
          >
            {{ category }}
          </view>
        </view>
      </view>

      <!-- Topics List -->
      <view class="space-y-4">
        <view
          v-for="(topic, index) in topics"
          :key="index"
          class="border-b border-gray-100 pb-4 last:border-0"
        >
          <view class="flex items-center mb-2 relative">
            <image
              :src="topic.author.avatar"
              :alt="topic.author.name"
              class="w-10 h-10 rounded-full object-cover mr-2"
            />
            <view>
              <view class="flex items-center">
                <view class="font-medium text-gray-800">{{ topic.author.name }}</view>
                <text
                  v-if="topic.author.isLeader"
                  class="ml-2 px-1.5 py-0.5 bg-orange-100 text-orange-500 text-xs rounded"
                >
                  社区团长
                </text>
              </view>
              <view class="flex items-center text-xs text-gray-500">
                <text>{{ topic.author.community }}</text>
                <text class="mx-1">·</text>
                <text>{{ topic.time }}</text>
              </view>
            </view>
          </view>

          <view class="text-gray-800 mb-2">{{ topic.content }}</view>

          <view v-if="topic.images && topic.images.length > 0" class="grid grid-cols-3 gap-1 mb-3">
            <image
              v-for="(image, imgIndex) in topic.images"
              :key="imgIndex"
              :src="image"
              :alt="topic.author.name"
              class="w-full aspect-square object-cover rounded-lg"
            />
          </view>

          <view class="flex items-center text-gray-500 text-sm">
            <view class="flex items-center mr-4">
              <ThumbsUp class="w-4 h-4 mr-1" />
              {{ topic.likes }}
            </view>
            <view class="flex items-center mr-4">
              <MessageSquare class="w-4 h-4 mr-1" />
              {{ topic.comments }}
            </view>
            <view class="flex items-center">
              <Share2 class="w-4 h-4 mr-1" />
              分享
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 5. Home Services Section -->
    <view class="bg-white mt-2 p-4">
      <view class="flex justify-between items-center mb-4">
        <view class="text-lg font-bold text-gray-800">上门服务</view>
        <view class="text-sm text-orange-500 flex items-center">
          更多服务
          <ChevronRight class="w-4 h-4" />
        </view>
      </view>

      <view class="grid grid-cols-4 gap-3">
        <view v-for="(service, index) in services" :key="index" class="flex flex-col items-center">
          <view class="w-14 h-14 rounded-lg bg-orange-50 flex items-center justify-center mb-1">
            <image :src="service.icon" :alt="service.name" class="w-8 h-8" />
          </view>
          <text class="text-xs text-gray-700 text-center">{{ service.name }}</text>
        </view>
      </view>
    </view>

    <!-- 6. Community Leader Recruitment Section -->
    <view class="bg-white mt-2 p-4 mb-4">
      <view class="bg-orange-50 rounded-lg p-4">
        <view class="text-lg font-bold text-orange-500 mb-2">微社区区长招募</view>
        <view class="text-gray-700 mb-4">
          成为社区区长，连接邻里，共建美好社区生活。享受专属权益，提升个人影响力！
        </view>
        <view class="w-full bg-orange-500 text-white font-bold py-2.5 rounded-lg mb-4">
          申请成为区长
        </view>

        <view class="grid grid-cols-2 gap-3">
          <view class="flex items-center bg-white rounded-lg p-2">
            <view class="w-8 h-8 rounded-full bg-orange-100 flex items-center justify-center mr-2">
              <Gift class="w-4 h-4 text-orange-500" />
            </view>
            <text class="text-sm text-gray-700">专属福利红包</text>
          </view>
          <view class="flex items-center bg-white rounded-lg p-2">
            <view class="w-8 h-8 rounded-full bg-orange-100 flex items-center justify-center mr-2">
              <DollarSign class="w-4 h-4 text-orange-500" />
            </view>
            <text class="text-sm text-gray-700">社区服务补贴</text>
          </view>
          <view class="flex items-center bg-white rounded-lg p-2">
            <view class="w-8 h-8 rounded-full bg-orange-100 flex items-center justify-center mr-2">
              <Award class="w-4 h-4 text-orange-500" />
            </view>
            <text class="text-sm text-gray-700">荣誉勋章</text>
          </view>
          <view class="flex items-center bg-white rounded-lg p-2">
            <view class="w-8 h-8 rounded-full bg-orange-100 flex items-center justify-center mr-2">
              <Users class="w-4 h-4 text-orange-500" />
            </view>
            <text class="text-sm text-gray-700">社区影响力</text>
          </view>
        </view>
      </view>
    </view>

    <!-- QR Code Modal -->
    <view
      v-if="showQRCodeModal"
      class="fixed inset-0 bg-black/50 z-20 flex items-center justify-center"
      @click="showQRCodeModal = false"
    >
      <view class="bg-white rounded-lg p-4 w-72 text-center" @click.stop>
        <view class="font-bold text-gray-800 mb-2">{{ selectedCommunity.name }}</view>
        <view class="text-sm text-gray-500 mb-4">扫描下方二维码加入小区微信群</view>
        <image
          :src="selectedCommunity.qrCode"
          alt="WeChat QR Code"
          class="w-48 h-48 mx-auto mb-4"
        />
        <view
          class="w-full bg-orange-500 text-white font-bold py-2 rounded-lg"
          @click="showQRCodeModal = false"
        >
          关闭
        </view>
      </view>
    </view>

    <!-- Bottom Navigation -->
    <view
      class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 flex justify-around py-2"
    >
      <view class="flex flex-col items-center px-3 py-1 text-orange-500">
        <Home class="w-5 h-5" />
        <text class="text-xs mt-1">首页</text>
      </view>
      <view class="flex flex-col items-center px-3 py-1 text-gray-500">
        <MapPin class="w-5 h-5" />
        <text class="text-xs mt-1">附近</text>
      </view>
      <view class="flex flex-col items-center px-3 py-1 text-gray-500">
        <PlusCircle class="w-5 h-5" />
        <text class="text-xs mt-1">发布</text>
      </view>
      <view class="flex flex-col items-center px-3 py-1 text-gray-500">
        <MessageSquare class="w-5 h-5" />
        <text class="text-xs mt-1">消息</text>
      </view>
      <view class="flex flex-col items-center px-3 py-1 text-gray-500">
        <User class="w-5 h-5" />
        <text class="text-xs mt-1">我的</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { http } from '@/utils/http'

import { ref } from 'vue'
import {
  ChevronRight,
  Users,
  MessageSquare,
  MapPin,
  Eye,
  ThumbsUp,
  Share2,
  PlusCircle,
  Home,
  User,
  Gift,
  DollarSign,
  Award,
} from 'lucide-vue-next'
import NewsList from '@/components/NewsList.vue'

// 1. Districts/Counties data
const districts = [
  { id: 'xinzhou', name: '信州区' },
  { id: 'guangfeng', name: '广丰区' },
  { id: 'shangrao', name: '上饶县' },
  { id: 'yushan', name: '玉山县' },
  { id: 'yanshan', name: '铅山县' },
  { id: 'hengfeng', name: '横峰县' },
  { id: 'yiyang', name: '弋阳县' },
  { id: 'wuyuan', name: '婺源县' },
  { id: 'wannian', name: '万年县' },
  { id: 'yugan', name: '余干县' },
  { id: 'poyang', name: '鄱阳县' },
  { id: 'dexing', name: '德兴市' },
]

const activeDistrict = ref('xinzhou')

const setActiveDistrict = (districtId) => {
  activeDistrict.value = districtId
}

// 2. Residential Community Selection
const communityTabs = ['热门小区', '距离最近', '人气最旺']
const activeCommunityTab = ref(0)

const communities = ref([])

// QR Code Modal
const showQRCodeModal = ref(false)
const selectedCommunity = ref({})

const openQRCodeModal = (community) => {
  selectedCommunity.value = community
  showQRCodeModal.value = true
}

// 3. Shangrao News Section
const news = {
  singleImage: [
    {
      title: '上饶市举办2023年文化旅游节，吸引众多游客前来参观',
      image: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
      publisher: '上饶日报',
      views: '2.3万',
    },
    {
      title: '信州区新建公园正式开放，市民休闲娱乐又添新去处',
      image: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
      publisher: '上饶新闻',
      views: '1.8万',
    },
  ],
  threeImages: [
    {
      title: '婺源油菜花盛开，金黄花海吸引全国各地游客前来观赏拍照',
      images: [
        'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
        'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
        'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
      ],
      publisher: '上饶旅游',
      date: '2023-10-15',
      views: '3.5万',
    },
    {
      title: '上饶市举办首届美食文化节，各地特色小吃云集，市民大饱口福',
      images: [
        'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
        'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
        'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
      ],
      publisher: '上饶生活',
      date: '2023-10-12',
      views: '2.7万',
    },
  ],
}

// 4. Community Topics Section
const topicCategories = ['全部', '生活', '美食', '闲置', '求助', '公告', '活动', '宠物']
const activeTopicCategory = ref(0)

const topics = ref([])

const getTopics = async () => {
  let res = await http.get('/api/topics/list')
  if (res.code == 200) {
    console.log('getTopics res', res)
  }
}

// 5. Home Services Section
const services = [
  {
    name: '维修服务',
    icon: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
  },
  {
    name: '保洁清洗',
    icon: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
  },
  {
    name: '管道疏通',
    icon: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
  },
  {
    name: '开锁服务',
    icon: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
  },
  {
    name: '家电维修',
    icon: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
  },
  {
    name: '搬家服务',
    icon: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
  },
  {
    name: '家政服务',
    icon: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
  },
  {
    name: '电脑维修',
    icon: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
  },
]

const newsList = ref([])

// 获取社区信息列表
const getCommunityList = async () => {
  let res = await http({
    url: '/api/community/list',
    method: 'GET',
  })

  if (res.code == 200) {
    console.log('res', res)
    communities.value = res.data.list
  }
}

const getNewsList = async () => {
  let res = await http.get('/api/news/list')
  if (res.code == 200) {
    console.log('res', res)
    newsList.value = res.data.list
  }
}

onLoad(() => {
  getCommunityList()
  getNewsList()
  getTopics()
})
</script>

<style scoped>
.district-selector,
.topic-categories {
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
}

.district-selector::-webkit-scrollbar,
.topic-categories::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Opera */
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
